<script lang="ts" setup>
    const clickHandler = () =>
    {
        uni.showToast({
            title: "点击了按钮",
            icon: "none"
        });
    };

</script>

<template>
    <!-- 按钮目录 -->
    <u-layout
        :enable-refresh="false"
        title="按钮组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <text class="title">
                    按钮类型：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                text="普通按钮"
                                type="info"
                                @click="clickHandler"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                text="成功按钮"
                                type="success"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                text="危险按钮"
                                type="error"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                text="主要按钮"
                                type="primary"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                text="警告按钮"
                                type="warning"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    镂空按钮：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                text="普通按钮"
                                type="info"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                text="成功按钮"
                                type="success"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                text="危险按钮"
                                type="error"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                text="主要按钮"
                                type="primary"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                text="警告按钮"
                                type="warning"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    禁用按钮：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                :disabled="true"
                                :plain="true"
                                text="普通按钮"
                                type="info"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :disabled="true"
                                :plain="true"
                                text="成功按钮"
                                type="success"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :disabled="true"
                                :plain="true"
                                text="危险按钮"
                                type="error"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :disabled="true"
                                :plain="true"
                                text="主要按钮"
                                type="primary"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :disabled="true"
                                :plain="true"
                                text="警告按钮"
                                type="warning"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    加载按钮：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                :loading="true"
                                :plain="true"
                                loading-text="数据加载中"
                                text="普通按钮"
                                type="info"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :loading="true"
                                loading-text="数据加载中"
                                text="成功按钮"
                                type="success"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :loading="true"
                                loading-text="数据加载中"
                                text="危险按钮"
                                type="error"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :loading="true"
                                loading-text="数据加载中"
                                text="主要按钮"
                                type="primary"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :loading="true"
                                loading-text="数据加载中"
                                text="警告按钮"
                                type="warning"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    不同尺寸按钮：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                size="large"
                                text="large按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                size="normal"
                                text="normal按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                size="small"
                                text="small按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                size="mini"
                                text="mini按钮"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    按钮形状：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                shape="circle"
                                text="半圆形按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                shape="square"
                                text="圆角按钮"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    自定义背景色：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                background-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
                                color="#fff"
                                text="渐变色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                background-color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
                                color="#fff"
                                text="渐变色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                background-color="rgb(10, 185, 156)"
                                color="#fff"
                                text="青绿色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                background-color="#fff000"
                                color="#ff0000"
                                text="黄色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                background-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
                                text="镂空渐变色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                background-color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
                                text="镂空渐变色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                background-color="rgb(10, 185, 156)"
                                text="镂空青绿色按钮"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                background-color="#fff000"
                                text="镂空黄色按钮"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    自定义图标：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                icon="user"
                                text="自定义图标"
                                type="primary"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                :plain="true"
                                icon="email"
                                text="自定义图标"
                                type="error"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                icon="date"
                                text="自定义图标"
                                type="warning"
                            />
                        </view>
                        <view class="ui-block">
                            <u-button
                                icon="date"
                                icon-color="#fff000"
                                text="自定义图标"
                                type="success"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <text class="title">
                    自定义图片：
                </text>
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-button
                                icon-image="https://assets.ecdata.cn/icon/htui/images/fbc441b1514c2c66e91d6e5178734a9b7db2ec8ccafb5-ysffoX.jpeg"
                                text="自定义图片"
                                type="primary"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //按钮目录 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;

                .ui-block-control
                {
                    display: grid;
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    grid-gap: 10px;
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>